<script setup>
import { ref, onMounted } from 'vue';
import { getFriendList } from '@/api/friends';
import { showDialog } from 'vant';
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
// -----------------------------------变量-------------------------------

// 定义一个mes存放请求回来的数据
const mes2 = ref([])


// 定义一个变量用于列表的显示
const show = ref(true)
// 定义一个变量用于资料的显示
const showIfo = ref(false)
// 搜索绑定的
const value = ref('');
// 定义一个变量存储搜索的数据
const searchMes = ref([])
// 定义一个资料卡显示的名字和照片
const showPerson = ref('')
// --------------------------------生命周期执行---------------------------
// 消息搜索功能实现
function onSearch() {

    console.log(value.value);

    // 不再展示消息列表，展示一个下拉的菜单
    show.value = false
    // 变量存储搜索的数据
    searchMes.value = mes2.value.filter(item => {
        return item.name.slice(0, value.value.length) === value.value

    })
    if (!searchMes.value[0]) {
        showDialog({
            message: '没有该联系人',
        }).then(()=>{
            value.value = ''
            show.value = true
            showPerson.value = ''
        })
    }
    console.log('搜索的数据', searchMes.value);
}
// 资料卡点击实现
// function onShowIfo(id) {
//     // 资料卡的显示状态
//     showIfo.value = !showIfo.value
//     console.log('传入的id', id);
//     // 根据id筛选对应的数据
//     showPerson.value = mes2.value.filter(item => {
//         return item.id == id
//     })
//     console.log('触发的名字showPerson', showPerson.value);

// }
function onShowIfo(id,name,url) {
    console.log('传入的id', id);
    window.localStorage.setItem('id',id)
    window.localStorage.setItem('nickname',name)
    window.localStorage.setItem('fImage',url)

    router.push('/friendinfor')
}

onMounted(() => {

})
console.log('外面打印触发的名字showPerson', showPerson.value);


// ---------------------------请求发送----------------------------------------
// 发送消息请求
getFriendList().then(res => {
    mes2.value = res.data.message
    // console.log(mes2.value);
})



</script>

<template>
    <div class="box">
        <!-- 1.表单组件————搜索  点击键盘上的搜索/回车按钮后触发-->
        <van-search @search="onSearch" v-model="value" input-align="left" shape="round" placeholder="搜索好友" />

        <div class="content ">
            <!-- 2.好友列表 -->

            <van-tag v-if="show" type="danger" size="large" v-for="(item, index) in mes2" :key="item.id" @click="onShowIfo(item.id,item.name,item.url)">

                <!-- 基础组件————image图片 -->
                <van-image round width="55px" height="55px" :src="mes2[index].url" />
                <div class="text" style="margin-left: 20px; position: relative;">
                    <p>{{ item.name }}</p>
                </div>
            </van-tag>

            <!-- 2.2搜索时展示的好友列表 -->

            <van-tag v-else type="danger" size="large" v-for="item in searchMes" @click="onShowIfo(item.id,item.name,item.url)">
               
                <!-- 基础组件————image图片 -->
                <van-image round width="55px" height="55px" :src="item.url" />
                <div class="text" style="margin-left: 20px; position: relative;">
                    <p>{{ item.name }}</p>
                </div>
            </van-tag>
        </div>

        <van-card v-if="showIfo && showPerson" :desc="showPerson[0].name" :title="showPerson[0].names"
            :thumb="showPerson[0].url" style="color: black;">
        </van-card>
        <p v-if="showIfo && showPerson" class="desc">{{ showPerson[0].signature }}</p>
    </div>
</template>


<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.p1 {
    text-align: center;
    font-size: 14px;
    color: rgb(100, 101, 102);
    margin-top: 10px;
}

.van-search {
    margin-bottom: 10px;
    width: 94%;
    margin: 0 auto;
}

.van-tabs {
    width: 204px;

}

.van-tag {
    display: flex;

    .text {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }


}

.active {
    font-size: 50px;
}

.van-tag--large {
    margin: 0 auto;
    width: 336px;
    height: 60px;
    color: black;
    background-color: #FFF;
    border-bottom: 1px solid rgb(248, 239, 239);
}

.box {
    flex: 1;
    display: flex;
    height: 300px;
    overflow: auto;
    position: relative;

    .content {
        flex: 1;
    }

    .van-card {
        width: 100%;
        color: black;
        font-size: 20px;


    }

    .desc {
        position: absolute;
        // background-color: red;
        bottom: 50px;
        left: 113px;
        color: pink;
    }
}

.footer {
    background-color: azure;
}
</style>